<script setup>
import HelloWorld from './components/HelloWorld.vue'
import HelloWorldJsx from './components/HelloWorldJsx.jsx'
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div class="wrap">

    <div class="wrap-item">
      <HelloWorld msg="HelloWorldSFCTemplate">
        <template #footer="slot">
          <p>我是底部slot-{{slot.msg}}</p>
        </template>
      </HelloWorld>
    </div>

    <div class="wrap-item">
      <HelloWorldJsx msg="HelloWorldJsx">
        <template #footer="slot">
          <p>我是底部slot-{{slot.msg}}</p>
        </template>
      </HelloWorldJsx>
    </div>
  </div>
</template>

<style scoped>
.wrap{
  display: flex;
  width: 100vw;
}
.wrap-item{
  flex: 1;
  margin: 0 10px;
}
</style>
